<template>
    <div>
        <Modal title="入库单详情" v-model="show" width="1200px" @on-visible-change="showModal" :closable="false"
            :mask-closable="false" >
            <div style="margin:0px 0px 10px 0px">
                <font style="margin-left: 20px">筛选：</font>
                <el-button size="small" :type="queryParams.state == null ? 'success' : 'default'"
                    @click="queryParams.state = null; getList();">
                    全部
                </el-button>
                <el-button size="small" @click="queryParams.state = 0; getList();"
                    :type="queryParams.state == 0 ? 'success' : 'default'">
                    待处理
                </el-button>
                <el-button size="small" @click="queryParams.state = 1; getList();"
                    :type="queryParams.state == 1 ? 'success' : 'default'">
                    已入库
                </el-button>
                <el-button size="small" @click="queryParams.state = -1; getList();"
                    :type="queryParams.state == -1 ? 'success' : 'default'">
                    待确认
                </el-button>
                <el-input v-model="queryParams.skuCode" size="small" style="width: 160px;" />
            </div>
            <el-form ref="storageBill" label-width="80px" :model="newBill" :inline="true">
                <el-form-item label="移入单号" prop="no">
                    <el-input size="small" v-model="newBill.no" placeholder="ID，不填表示新建" style="width: 140px" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" @click="toNewBill" :disabled="!newBill.items.length" type="success">
                        转入{{ newBill.no ? newBill.no + '入库单' : '新入库单' }}
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" v-for="item in newBill.items" @click="resetOtherItem(item)">
                        {{ item.boxNo }}箱{{ item.skuCode }}
                    </el-button>
                </el-form-item>
            </el-form>
            <div style="margin-bottom: 10px;overflow: hidden">
                <div>
                    <el-pagination background :current-page="page.current" :page-size="page.pageSize"
                        layout="total, prev, pager, next" :total="page.total" @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
            <div style="">
                <el-table v-loading="loading" :data="order.items" border style="width: 100%;" small>
                   <!--  <el-table-column align="center" prop="boxNo"  label="操作" width="50">
                        <template slot-scope="scope">
                            <el-button size="small" @click="toOtherPack(scope.row)">
                                拆包
                            </el-button>

                        </template>
                    </el-table-column> -->
                    <el-table-column align="center" prop="boxNo"  label="箱号" width="50">
                    </el-table-column>
                    <el-table-column align="center" prop="thumb"  label="商品" width="230">
                        <template slot-scope="scope">
                            <el-image :fit="'fit'" style="width:80px;height: auto;" :src="scope.row.thumb">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                            <div class="">{{ scope.row.productName }}
                                <el-tag v-if="scope.row.productState == -1" effect="dark" type="danger">下架了</el-tag>
                                <el-tag v-else type="success">在售</el-tag>
                            </div>

                            <div>{{ scope.row.width }}，{{ scope.row.length }}，{{ scope.row.height }}</div>

                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="warehouseName"  label="仓库" width="50">
                    </el-table-column>
                    <el-table-column align="center" prop="skuCode"  label="sku编码" width="170">
                    </el-table-column>


                    <el-table-column align="center" prop="variationName"  label="货号/规格" width="170">
                    </el-table-column>
                    <el-table-column align="center" prop="quantity"  label="数量" width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="confirmQuantity"  label="实际到货" width="80">
                        <template slot-scope="scope">
                            <span>
                                {{ scope.row.confirmQuantity }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="confirmQuantity" fixed="left" label="操作" width="240">
                        <template slot-scope="scope">
                           <el-button  :loading="scope.row.okLoading" v-if="scope.row.state==0" size="small" @click="confirmOk(scope.row)">
                               入库
                            </el-button> 
                           
                            <div v-if="scope.row.state == -1">
                                <el-button type="warning" :loading="scope.row.okLoading" size="small"
                                    @click="confirmOk(scope.row)">确认入库</el-button>
                            </div>
                            <div v-if="scope.row.state == 1">
                                <span class="state-success-full">已入库：
                                    {{ scope.row.confirmQuantity }}</span>
                                <div>
                                    {{ scope.row.okTime | long2datetime }}
                                </div>

                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 10px;overflow: hidden">
                <div>
                    <el-pagination :current-page="page.current" background :page-size="page.pageSize"
                        layout="total, prev, pager, next" :total="page.total" @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
            <div style="margin-top: 10px">
                备注：<font color="#ff0000">{{ order.sysRemark }}</font>
            </div>
            <div slot="footer">
                <!--   <el-button type="success" v-if="order.state==1&&order.back==1" :loading="order.okLoading" @click="confirmOk()">同意入库</el-button> -->
                <el-button @click="cancelAsync">关闭</el-button>
            </div>
        </Modal>
    </div>
</template>
<script>
import {doStorageBillItemSign, getStorageBillDetail,getStorageBillItemList} from "@/api/ProductApi"
export default {
    name: "CAsync",
    data() {
        return {
            queryParams: {
                state: null, skuCode: ''
            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            show: false,
            loading: false,
            okLoading: true,
            order: {
                okLoading: false
            }, newBill: { no: '', items: [] }
        }
    },
    props: [
        "billId",
        "id"
    ],
    mounted: function () {

    },
    watch: {

    },
    methods: {
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        showDialog: function (skuCode) {
            this.show = true;
            this.newBill.newNo = 0;
            this.newBill.items = [];
            this.queryParams.skuCode = skuCode;
        },
        showModal: function (val) {
            if (val) {
                // this.getDetail();
                this.search();
            }
            else {
                this.queryParams.state = null;
            }
        },
        search() {
            this.page.current = 1;
            this.getList();
        },
        confirmOk(row) {

            var me = this;
            row.okLoading = true;
            doStorageBillItemSign({ id: row.id }).then(response => {
                var body = response;
                row.okLoading = false;
                if (body.status == 0) {

                    me.successMessage("入库成功");
                    row.state = 1;

                } else {

                    me.errorMessage(body.info)

                }

            }, response => {
                me.errorMessage("系统异常");
                row.okLoading = false;
            });
        },
        getList() {


            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            params.billId = me.billId;
            params.id = me.id;

            me.loading = true;
            getStorageBillItemList(params).then(res => {
                me.loading = false;
                var items = res.obj.list;
                if (res.status == 0) {
                    for (var i = 0; i < items.length; i++) {
                        me.$set(items[i], 'erLoading', false);
                        me.$set(items[i], 'okLoading', false);
                        me.$set(items[i], 'okState', 1);
                    }

                    me.order.items = items;
                    me.page.total = res.obj.totalCount;
                    me.removeOtherItem()
                } else {
                    me.errorMessage(res.info);
                    me.show = false;
                }
            }, response => {
                me.loading = false;
                me.errorMessage("系统异常");
                me.show = false;

            });


        },
        
        cancelAsync: function () {
            // body...
            this.show = false;
            this.$emit("cancel")
        },
        okAsync: function () {
            this.show = false;
            this.$emit("ok");
        },
        setNewBillItems(val) {
            this.newBill.items = val;
        },
        toOtherPack(row) {
            const index = this.newBill.items.findIndex(a => row.id === a.id);
            if (index == -1) {
                this.newBill.items.push(row);
            }
            this.removeOtherItem();
        },
        removeOtherItem() {
            var me = this;
            for (let item of me.newBill.items) {
                const index = me.order.items.findIndex(a => item.id === a.id);
                if (index !== -1) {
                    // 移除该元素
                    me.order.items.splice(index, 1);
                }
            }
        },
        resetOtherItem(row) {
            const index = this.newBill.items.findIndex(a => row.id === a.id);
            if (index > -1) {
                this.newBill.items.splice(index, 1);
                this.order.items.unshift(row);
            }
        },
        toNewBill() {
            var me = this;
            var itemIds = me.newBill.items.map(item => item.id)
            if (!me.newBill.no) {
                me.newBill.no = 0;
            }
            var data = { newNo: me.newBill.no, oldNo: me.id, items: itemIds.join(",") }
            me.$http.post("/storagebill/tonewbill.do", data).then(res => {
                me.loading = false;
                me.successMessage(res.info);
                me.show = false;
            }, response => {
                me.loading = false;
                me.errorMessage("系统异常");
                me.show = false;

            });
        }
    }
}
</script>